<template>
	<view class="record">
		<view class="content">
			<xbd-select :carId.sync="type" :visible.sync="visible" :infoList="infoList">
				<template>
					<view class="select" @click="visible = true">
						<view class="text2">
							{{ type  }}
						</view>
						<image class="image" src="@/static/image/down.svg">
						</image>
					</view>
				</template>
			</xbd-select>
			<view class="sreach">
				<uni-easyinput class="uni-mt-5" suffixIcon="search" v-model="info.keyword"
					placeholderStyle="font-size:30rpx" placeholder="搜索内容" @iconClick="iconClick"></uni-easyinput>
			</view>
		</view>
		<view class="list">
			<uni-list :border="false">
				<xbd-warn-lists v-for="(item,index) in showList" :key="index" :warning="item" />
				<xbd-null-list v-if="!showList.length"></xbd-null-list>
				<xbd-loading-more v-if="showList.length" :status-num="statusNum" :is-load-more="isLoadMore">
				</xbd-loading-more>
			</uni-list>
		</view>
		
	</view>
</template>

<script>
	import {
		Prevention
	} from '@/api/index.js';
	export default {
		name: "record",
		data() {
			return {
				statusNum: 0,
				isLoadMore: false,
				showList: [],
				type: "全部状态",
				visible: false,
				infoList: [{
						value: '1',
						label: '全部状态'
					},
					{
						value: '2',
						label: '待审核'
					},
					{
						value: '3',
						label: '已通过'
					},
					{
						value: '4',
						label: '已拒绝'
					}
				],
				info: {
					page: 1,
					perpage: 10,
					keyword: '',
					state: '',
					level: ''
				}
			};
		},
		watch: {
			type(newv, old) {
				switch (newv) {
					case "全部状态":
						this.info.state = ''
						break;
					case "待审核":
						this.info.state = 'wait'
						break;
					case "已通过":
						this.info.state = 'successed'
						break;
					case "已拒绝":
						this.info.state = 'refused'
						break;
				}
				this.info.page= 1,
				this.statusNum = 0
				this.init()
			}
		},
		methods: {
			async init() {
				const res = await Prevention.getRecordList(this.info)
				if (res.data.list.length === this.info.perpage) {
					this.isLoadMore = true;
					this.statusNum = 2;
					console.log('123')
				}
				this.showList = res.data.list
				console.log(res)
			},
			iconClick(){
				this.info.page= 1,
				this.statusNum = 0
				this.init()
			},
			// 加载更多
			loadmore() {
				this.info.page++;
				this.statusNum = 1;
				this.isLoadMore = true;
				this.loadmoreList();
			},
			async loadmoreList() {
				try {
					const res = await Prevention.getRecordList(this.info);
					if (res.data.list.length) {
						this.showList = this.showList.concat(res.data.list);
						if (res.data.list.length === this.info.perpage) {
							this.statusNum = 2;
						} else {
							this.statusNum = 0;
						}
						// this.isLoadMore = false;
					} else {
						this.info.page--;
						this.statusNum = 0;
					}
				} catch (e) {
					uni.hideLoading();
					this.info.page--;
				}
			},
		},
		async onShow() {
			uni.pageScrollTo({
			    scrollTop: 0,
			});
			await this.init()
		},
		// 触底触发
		onReachBottom() {
			// 当下拉组件显示状态 并且显示不是没有数据了 时才进行下拉加载
			console.log('触底操作')
			if (this.isLoadMore && this.statusNum !== 0) {
				this.loadmore();
				console.log('223')
			}
		}
	};
</script>

<style lang="scss" scoped>
	@import "@/static/common.scss";

	::v-deep .uni-icons {
		margin-right: 20rpx;
	}

	::v-deep .is-input-border {
		border: 1rpx solid #d0d6e5;
	}

	::v-deep .uni-easyinput__content-input {
		font-size: 30rpx;
	}
	::v-deep .uni-easyinput__content{
		height: 72rpx !important;
	}
	::v-deep .uni-list {
		background-color: transparent;
		padding: 0 32rpx;
	}

	.record {
		.list{
			margin-top: 130rpx;
		}
		.content {
			position: fixed;
			top: 0;
			z-index: 999;
			width: 750rpx;
			display: flex;
			background-color: #fff;
			box-sizing: border-box;
			margin-bottom: 20rpx;
			padding: 20rpx 32rpx;
			justify-content: space-between;

			.select {
				// margin: 100rpx 0 50rpx;
				// margin-right: ;
				height: 72rpx;
				width: 216rpx;
				line-height: 72rpx;
				font-size: 30rpx;
				background-color: #fff;
				display: flex;
				justify-content: space-between;
				align-items: center;
				box-sizing: border-box;
				padding: 0 20rpx;
				color: #A0A7B8;
				border: 2rpx solid #EBEEF5;
				border-radius: 6rpx;

				.text2 {
					font-size: 30rpx;
					font-weight: 400;
					color: #8890A5;
				}

				image {
					width: 28rpx;
					height: 30rpx;
				}
			}

			.sreach {
				// @include compress;
				padding-bottom: 2rpx;
				width: 442rpx;
				// margin-bottom: 20rpx;
				background-color: #fff;
			}
		}

	}
</style>
